body {
  background: white;
}
#box {
  width: 500px;
  height: 380px;
  position: absolute;
  top: 100px;
  left: 200px;
}
* {
  user-select: none;
}
#img1,
#img2 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#img1 {
  opacity: 0.3;
}
#img2 {
  clip: rect(0, 200px, 200px, 0);
}
#main {
  position: absolute; /*第三层需用绝对定位浮在上面*/
  width: 200px;
  height: 200px;
  border: 1px solid #fff;
}
.Divmin {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
}
.up-left {
  margin-top: -4px;
  margin-left: -4px;
  cursor: nw-resize;
}
.up {
  left: 50%; /*父元素盒子main宽度的一半，注意要有绝对定位*/
  margin-left: -4px;
  top: -4px;
  cursor: n-resize;
}
.up-right {
  top: -4px;
  right: -4px;
  cursor: ne-resize;
}
.right {
  top: 50%;
  margin-top: -4px;
  right: -4px;
  cursor: e-resize;
}
.right-down {
  right: -4px;
  bottom: -4px;
  cursor: se-resize;
}
.down {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  cursor: s-resize;
}
.left-down {
  left: -4px;
  bottom: -4px;
  cursor: sw-resize;
}
.left {
  left: -4px;
  top: 50%;
  margin-top: -4px;
  cursor: w-resize;
}

/* 预览图片 */
#preview {
  position: absolute;
  width: 500px;
  height: 380px;
  top: 100px;
  left: 900px;
}
#preview #img3 {
  clip: rect(0, 0, 0, 0);
  width: 100%;
  position: absolute;
}
